<%-- 
    Document   : tempsearch.jsp
    Created on : Apr 4, 2014, 2:01:24 PM
    Author     : anthony
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="newcss.css" />        
        <script type="text/javascript" language="javascript"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            // Note: This example requires that you consent to location sharing when
            // prompted by your browser. If you see a blank space instead of the map, this
            // is probably because you have denied permission for location sharing.

            var map;

            function initialize() {
                var mapOptions = {
                    zoom: 6
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
                        mapOptions);

                // Try HTML5 geolocation
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var pos = new google.maps.LatLng(position.coords.latitude,
                                position.coords.longitude);

                        var infowindow = new google.maps.InfoWindow({
                            map: map,
                            position: pos,
                            content: 'Location found using HTML5.'
                        });

                        map.setCenter(pos);
                    }, function() {
                        handleNoGeolocation(true);
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleNoGeolocation(false);
                }
            }

            function handleNoGeolocation(errorFlag) {
                if (errorFlag) {
                    var content = 'Error: The Geolocation service failed.';
                } else {
                    var content = 'Error: Your browser doesn\'t support geolocation.';
                }

                var options = {
                    map: map,
                    position: new google.maps.LatLng(60, 105),
                    content: content
                };
                //var infowindow = new google.maps.InfoWindow(options);
                map.setCenter(options.position);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
        <title>SICK Online</title>
    </head>    
    <body>
        <div id="container">
            <div id="header">
                <h1>SICK</h1>
                <h2>Superior Illness Computational Knowledge-Base</h2>
            </div>
            <div id="big_box" style="height: 100%;">                
                <h2 style="text-indent: 10%; padding-top: 2%; text-align: left;">Let us help you get better..</h2>
                <div id="slideshow">
                    <img src="7.jpg"/>
                    <img src="9.jpg"/>
                    <img src="8.jpg"/>  
                </div>                
                <h2 style="text-align: right; padding-right: 15%;">What is bothering you?</h2>
                <form action="" name="searchForm" style="float: right; margin-bottom: 5%; padding-right: 15%;">
                    <br /><input id="searchField" class="text-input" type="text" name="search_val"/>
                    <br /><br />
                    <br /><input id="diseaseButton" class="button" type="submit" name="action" value="Search Diseases"/>
                    <input id="symptomButton" class="button" type="submit" name="action" value="Search Symptoms"/>
                </form>    
                <div id="map-canvas">
                </div>
                <div id="result" style="float: right;"></div>
                <script type="text/javascript">
                    $('input#diseaseButton').on('click', function() {
                        var query = $('input#searchField').val();
                        if ($.trim(query) !== '') {
                            $.post("SessionSearch", {
                                search_val: query,
                                action: "Search Diseases"
                            },
                            function(data) {
                                $('div#result').html(data);
                            });
                        }
                        return false;
                    });

                    $('input#symptomButton').on('click', function() {
                        var query = $('input#searchField').val();
                        if ($.trim(query) !== '') {
                            $.post("SessionSearch", {
                                search_val: query,
                                action: "Search Symptoms"
                            },
                            function(data) {
                                $('div#result').html(data);
                            });
                        }
                        return false;
                    });

                    $(function() {
                        $('#slideshow img:gt(0)').hide();
                        setInterval(function() {
                            $('#slideshow :first-child').fadeOut()
                                    .next('img').fadeIn()
                                    .end().appendTo('#slideshow');
                        },
                                6000);
                    });
                </script>              
            </div>
        </div>    
    </body>
</html>
